import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form, Input, Row, Col, Space, Table, Tag } from 'antd';
import { CmdbContent, CmdbHeader } from '@/components';
import '../index.less';
import { columns } from './config';
import { useHistory } from 'react-router-dom';
import request from '@/utils/request';
function CloudManagement () {
  const history = useHistory();
  const [form] = Form.useForm();
  const [data, setData] = useState([])
  const [params, setParams] = useState({
    pageNum: 1,
    pageSize: 10,
  })

  const getList = async () => {
    // const res = await request({
    //   ...cmdbres.moni,
    //   data: {
    //     pageNum: 1,
    //     pageSize: 10,
    //   }
    // })

    // console.log(res, '数据列表');
    // if (res.code === 0 && res.data.length) {
    //   setData(res.data)
    // }

    setTimeout(() => {
      console.log(1);

      setData([
        {
          templateName: '用户信息模版',
          templateId: 'T001',
          templateDescription: '用于收集用户的基本信息',
          relatedTemplates: '基础信息模版',
          creator: '张三',
          createdAt: '2025-08-30 12:00:00',
          updater: '李四',
          updatedAt: '2025-08-30 13:00:00',
        },
        {
          templateName: '订单模版',
          templateId: 'T002',
          templateDescription: '订单处理流程模版',
          relatedTemplates: '发货模版, 支付模版',
          creator: '王五',
          createdAt: '2025-08-29 15:30:00',
          updater: '赵六',
          updatedAt: '2025-08-30 09:00:00',
        },
        {
          templateName: '审批流模版',
          templateId: 'T003',
          templateDescription: '适用于公司内审批流程的模版',
          relatedTemplates: '请假模版, 报销模版',
          creator: '陈晴',
          createdAt: '2025-08-28 10:20:00',
          updater: '孙七',
          updatedAt: '2025-08-29 17:45:00',
        },
        {
          templateName: 'HR报表模版',
          templateId: 'T004',
          templateDescription: '人力资源部门使用的各类报表模版',
          relatedTemplates: '员工考勤模版',
          creator: '周八',
          createdAt: '2025-08-27 14:10:00',
          updater: '郑九',
          updatedAt: '2025-08-28 11:30:00',
        },
        {
          templateName: '财务报表模版',
          templateId: 'T005',
          templateDescription: '公司财务部门使用的财务报表模版',
          relatedTemplates: '收入报表, 支出报表',
          creator: '李十',
          createdAt: '2025-08-26 09:00:00',
          updater: '王十一',
          updatedAt: '2025-08-27 16:00:00',
        },
      ])
    }, 1000);

  }

  useEffect(() => {
    getList()
  }, [params])

  const onFinish = (values) => {
    console.log('查询参数:', values);
    setParams({
      ...params,
      ...values,
    })
  };



  const onReset = () => {
    form.resetFields();
  };

  // 新增和编辑通用
  const _addModule = (record = {}) => {
    if (record?.templateId) {
      // 如果id存在，跳转并带上id作为state
      history.push({
        pathname: '/template/cloudUpdate',
        state: { record },
      });
    } else {
      // 如果id不存在，跳转到相同的路由，不带id
      history.push({
        pathname: '/template/cloudUpdate',
      });
    }
  }


  return (
    <div style={{ padding: '10px', width: 'calc(100% - 270px)' }}>
      <CmdbHeader title="云区域模版" />
      <div className="back-white padding-10">
        <div className="padding-10">
          <Form form={form} name="search_form" layout="inline" onFinish={onFinish}>
            <Row gutter={24} style={{ width: '100%' }}>
              <Col span={6}>
                <Form.Item label="模板ID" name="templateId">
                  <Input placeholder="请输入模板ID" />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label="模板名称" name="templateName">
                  <Input placeholder="请输入模板名称" />
                </Form.Item>
              </Col>
              <Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
                <Form.Item style={{ marginLeft: 8 }}>
                  <Button onClick={onReset}>重置</Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </div>

      <div className="table-btns">
        <Button type="primary" style={{ marginBottom: '20px' }} onClick={() => _addModule()}>
          新建
        </Button>
        <Table columns={columns({ _addModule })} rowKey="templateId" dataSource={data} scroll={{ x: 1000 }} />
      </div>
    </div>
  );
}

export default CloudManagement;
